<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>

    let target = {
      name: '邵美丽',
      age: 18
    }
    let hander = {
      get(target, name) {//get 是自己定义的，可以叫任何名字，把target里面的name获取出来
        console.log('示例一\nget方法', name);
        return target[name]
      }
    }
    let pro = new Proxy(target, hander)
    console.log(pro.name);
    console.log(pro.age);


    // 示例二
    let target2 = {
      name: '邵大美女',
      age: '18'
    }
    let hander2 = {}
    console.log('实例二\n当hander为空时');
    let pro2 = new Proxy(target2, hander2)
    console.log(pro2.name);
    console.log(pro2.age);
    // 如果hander为空白的时候，未设置对对象的拦截方法操作，这种情况下pro直接指向源对象target，
    // 访问pro等同于访问target
    // 所以结果是target中的结果



    // console.log('示例3\n');
    let target3 = {
      name: '哈哈哈',
      age: 18
    }
    let hander3 = {
      get(target, name) {//get 是自己定义的，可以叫任何名字，把target里面的name获取出来
        console.log('\n示例三方法');
        return target[name]
      }
    }
    let pro3 = new Proxy(target3, hander3)
    console.log(pro3.name);
    console.log(pro3.age);

    let obj = Object.create(pro3)
    console.log('\n\nobj同名', pro3);
    console.log('\n\nobj同名', obj.name);
    // 上述示例将pro作为作为obj的原型对象使用虽然obj本身没有name这个属性
    // 但是根据原型链会在pro上读取到name这个属性之后会执行相对应的拦截操作


  </script>
</head>

<body>
  <p>使用方法：new proxy(target,hander)</p>
  <h1>首先new了一个proxy相当于创建了一个proxy实例（可以对目标对象进行读取，还可以进行一些其他操作</h1>
  <h1>target是要拦截的目标对象，hander也是一个对象，里边定义的是对拦截对象所要进行拦截的方法</h1>
  <p>Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。

    Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。

    Reflect 可以用于获取目标对象的行为，它与 Object 类似，但是更易读，为操作对象提供了一种更优雅的方式。它的方法与 Proxy 是对应的。
  </p>
</body>

</html>